<template>
	<gui-page :customHeader="true">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<template v-slot:gBody>
			<view class="ps gui-bg-white" style="z-index: 100;">
				<!-- 切换导航 -->
				<view class="gui-border-b gui-padding-small">
					<gui-switch-navigation :items="navItems" :isCenter="true" :size="180" lineHeight="60rpx" width="750"
						textAlign="center" activeLineWidth="180rpx" activeLineHeight="6rpx"
						:activeLineClass="['gui-gtbg-red']" :margin="10" @change="navChange"></gui-switch-navigation>
				</view>
				
				<view class="gui-padding-m">
					<view class="list-coupon-item gui-padding" v-for="num in 20">
						<view class="flex align-items">
							<view class="price red fb ml10 mt10">
								<text class="fz20">￥</text>
								<text class="fz48">50</text>
							</view>
							<view class="ml20">
								<view class="tit fz14">无金额门槛</view>
								<view class="tit fz14 mt5">2019.02.21 13:56－2019.02.22 13:56</view>
							</view>
						</view>
						<view class="gui-padding fz14">
							<view>优惠提供：java架构漫谈</view>
							<view class="mt4">适用范围：深入剖析dubbo源码的设计原理</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>
<script>
	export default {
		data() {
			return {
				// 切换导航
				navItems: [{
					id: 1,
					name: '可使用'
				}, {
					id: 2,
					name: '已使用'
				}, {
					id: 3,
					name: '已过期'
				}],
			}
		},

		created() {
		},

		methods: {
			
		}
	}
</script>
<style scoped lang="scss">
	.list-coupon-item{
		background:url('/static/imgs/coupon.png');
		box-sizing: border-box;
	    margin-bottom: 5px;
	    width: 100%;
	    height: 280rpx;
	    background-size: 100%;
	    position: relative;
	}
</style>